<template>
  <div class="app-container">
    <el-dialog :title="this.title" :visible="visible" @close="cancel" width="1000px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>
          <el-row>
            <el-col :span="24">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                v-show="!update"
                @click="handleAdd"
                v-hasPermi="['projectManage:templete:add']"
          >添加</el-button>
            </el-col>
          </el-row>
          <el-row v-show="!update">
            <el-col :span="24">
              <el-form>
                <el-form-item label="是否设置成当前版本" prop="resource">
                  <el-radio-group v-model="param.status">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </el-col>
            
          </el-row>
          <el-row>
              <el-col :span="24">
                <el-table
                  :data="tableData"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id"
                  border
                  v-loading="loading"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column
                    prop="nodeName"
                    label="节点/任务" >
                  </el-table-column>
                  <el-table-column
                    prop="ownerPositionName"
                    label="责任人"
                    width="150" >
                  </el-table-column>
                  <el-table-column
                    prop="needFlag"
                    label="是否必填"
                    width="150" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.project_y_n" :value="scope.row.needFlag" />
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="oaTempleteId"
                    label="OA模板ID"
                    width="150"> 
                  </el-table-column>
                  <el-table-column
                  prop="oaUrl"
                  label="OA链接"
                  width="150"> 
                </el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
                    
                    <template slot-scope="scope">
                      <el-button size="mini" type="text"  
                        icon="el-icon-plus" @click="handleAdd(scope.row)" v-show="!update"
                        v-hasPermi="['projectManage:templete:add']">添加</el-button>
                      <el-button size="mini" type="text"  
                        icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['projectManage:templete:update']">修改</el-button>
                      <el-button size="mini" type="text"  
                        icon="el-icon-delete" @click="handleDel(scope.row)" v-show="!update"
                        v-hasPermi="['projectManage:templete:delete']">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
          </el-row>
              
          <span slot="footer" class="dialog-footer" > 
            <el-button  @click="cancel">取 消</el-button>
            <el-button type="primary" v-show="!update" @click="onSure">提 交</el-button>
          </span>
    </el-dialog>
    <el-dialog :title="itemTitle" :visible="itemVisible" @close="close" width="500px"
    :close-on-click-modal="false" :close-on-press-escape="false"
     append-to-body>
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级节点" prop="parentNodeName" v-show="!update">
            <el-input v-model="parentNodeName" placeholder="请输入节点名称" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="节点名称" prop="nodeName">
            <el-input v-model="form.nodeName" placeholder="请输入节点名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="必填" prop="needFlag">
            <el-select v-model="form.needFlag" filterable >
              <el-option v-for="dict in dict.type.project_y_n" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="OA模版ID" prop="oaTempleteId">
            <el-input v-model="form.oaTempleteId" placeholder="请输入OA模版ID" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="OA表单链接" prop="oaUrl">
            <el-input v-model="form.oaUrl" placeholder="请输入OA表单链接" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="!update">
        <el-col :span="24">
          <el-form-item label="责任岗位" prop="postCodes">
            <el-select v-model="form.postCodes" filterable  multiple >
              <el-option v-for="dict in dict.type.owner_position" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-row>
     </el-form>
    </el-dialog>
    
  </div>
</template>

<script>
  import {addNode,add,getProjectTempleteDetail,updateNode,delNode}  from "@/api/projectManage/templete";

  export default {
  name: "ProjectTemplete",
  dicts: ['owner_position','project_y_n'],
  data() {
      return {
        loading:false,
        visible:false,
        update:false,   
        title:'',
        itemTitle:'',
        itemVisible:false,
        parentNodeName:'根节点',
        param:{
          id:null,
          parentId:null,
          status:0
        },
        form:{},
        // 表单校验
        rules: {
          nodeName: [
            { required: true, message: "节点名称不能为空", trigger: "blur" }
          ],
          needFlag: [
            { required: true, message: "必填不能为空", trigger: "blur" }
          ] 
        },
        tableData: []
      }
  },
  created() {
     
  },
  methods: {

    //删除节点
    handleDel(row){
      delNode(row).then(response => {
          this.getDetail();
      });  
    },
    //添加节点提交事件
    onSubmit(){
      this.$modal.loading("请稍候...");

      if(this.itemTitle == '修改'){
        updateNode(this.form).then(response => {
          this.$modal.closeLoading();
          this.close();
          this.getDetail();
        });  
      }else{
        this.form.versionId = this.param.id;
        this.form.parentId =  this.param.parentId;
        addNode(this.form).then(response => {
          this.$modal.closeLoading();
          this.close();
          this.getDetail();
        }); 
      }      
    },

    //提交模板
    onSure(){
      this.$modal.loading("请稍候...");
      add(this.param).then(response => {
         this.$modal.closeLoading();
         this.cancel();
         this.$emit('query');
      });        
    },

    //加载详情
    getDetail(){
      this.loading = true;
      getProjectTempleteDetail(this.param).then(response => {
         this.tableData = response.data.projectTempleteDefineList;
         this.loading = false;
      });  
    },


    //修改事件
    handleUpdate(obj){
      this.form = obj;
      console.log(obj);
      this.itemVisible = true;
      this.itemTitle = '修改'; 
    },
    //添加节点 
    handleAdd(obj){
       //子节点
       if(obj.nodeName){
         this.parentNodeName = obj.nodeName;
         this.param.parentId = obj.id;
       }else{ //根节点
         this.parentNodeName = '根节点';
         this.param.parentId =  this.param.id;
       }

       this.itemVisible = true;
       this.itemTitle = '添加'; 
       this.form.needFlag = '1';
    },

    //关闭添加节点按钮
    close(){
      this.itemVisible = false;
      this.reset();
      this.getDetail();
    },
    //弹出
     open(){
        this.visible = true;
     },
     //查询事件重置
     reset(){
      this.form = {};
     },

     //初始化
     init(title,id,update){
       
      this.title = title;
      this.param.id = id;
      this.update = update;
      this.getDetail();
     }, 
     // 取消按钮
     cancel() {
        this.visible = false;
        this.reset();
        this.tableData = [];  
     }
  }
};
</script>
 
 
